<template name="addCollection">
    <div class="modal inmodal" id="collectionAddModal" tabindex="-1" role="dialog" aria-hidden="true"
         style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                            class="sr-only">{{_ "close"}}</span></button>
                    <h4 id="collectionAddModalTitle" class="modal-title">{{_ "create_collection_view"}}</h4>
                    <small id="spanColName" class="font-bold">{{getConnection.connectionName}}
                    </small>
                </div>
                <div class="modal-body">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab-1-options"
                                                  aria-expanded="true">
                                {{_ "general"}}</a>
                            </li>
                            <li class=""><a id="anchorStorageEngine" data-toggle="tab" href="#tab-2-engine"
                                            aria-expanded="false">{{_ "storage_engine"}}</a>
                            </li>
                            <li class=""><a id="anchorValidator" data-toggle="tab" href="#tab-3-validator"
                                            aria-expanded="false">{{_ "validator"}}</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-4-collation"
                                            aria-expanded="false">{{_ "collation"}}</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <!-- TAB 1 -->
                            <div id="tab-1-options" class="tab-pane active">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "collection_view"}}</label>
                                            <div class="col-lg-10">
                                                <select id="cmbCollectionOrView"
                                                        data-placeholder="Collection or View..."
                                                        class="chosen-select form-control"
                                                        tabindex="-1">
                                                    <option value="collection">{{_ "collection"}}</option>
                                                    <option value="view">{{_ "view"}}</option>
                                                </select>
                                                <span class="help-block m-b-none">{{{_ "view_mongodb_version_warning"}}}</span>
                                            </div>
                                        </div>
                                        <div id="divViewCollections" class="form-group" style="display: none;">
                                            <label class="col-lg-2 control-label">{{_ "collections"}}</label>
                                            <div class="col-lg-10">
                                                <select id="cmbCollectionsViewOn"
                                                        data-placeholder="{{_ "select_collection"}}"
                                                        class="chosen-select form-control"
                                                        tabindex="-1">
                                                    <option></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group"><label class="col-lg-2 control-label">
                                            Name</label>
                                            <div class="col-lg-10"><input id="inputCollectionViewName"
                                                                          data-required="true"
                                                                          type="text"
                                                                          placeholder="{{_ "name"}}"
                                                                          class="form-control">
                                            </div>
                                        </div>
                                        <div id="divViewPipelineFormGroup" class="form-group" style="display: none;">
                                            <label class="col-lg-2 control-label">{{_ "view_pipeline"}}</label>
                                            <div id="divViewPipeline" class="col-lg-10">
                                                <textarea id="txtViewPipeline" class="form-control"></textarea>
                                            </div>
                                        </div>

                                        <div class="hr-line-dashed"></div>

                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "options"}}</label>
                                            <div class="col-lg-10">
                                                <select id="cmbAddCollectionViewOptions"
                                                        data-placeholder="{{_ "select_options"}}"
                                                        multiple="true"
                                                        class="chosen-select form-control"
                                                        tabindex="-1">
                                                    <option></option>
                                                </select>
                                            </div>
                                        </div>

                                        {{> addCollectionOptions}}
                                    </form>
                                </div>
                            </div>

                            <!-- TAB 2 -->
                            <div id="tab-2-engine" class="tab-pane">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "storage_engine"}}</label>
                                            <div id="divStorageEngine" class="col-lg-10">
                                                <textarea id="txtStorageEngine" class="form-control"></textarea>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!--TAB 3 -->
                            <div id="tab-3-validator" class="tab-pane">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "validation_action"}}</label>
                                            <div class="col-lg-10">
                                                <select id="cmbValidationActionAddCollection"
                                                        data-placeholder="{{_ "leave_empty_for_no_action"}}"
                                                        class="chosen-select form-control"
                                                        tabindex="-1">
                                                    <option></option>
                                                    <option value="warn">{{_ "warning"}}</option>
                                                    <option value="error">{{_ "error"}}</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "validation_level"}}</label>
                                            <div class="col-lg-10">
                                                <select id="cmbValidationLevelAddCollection"
                                                        data-placeholder="{{_ "leave_empty_for_no_level"}}"
                                                        class="chosen-select form-control"
                                                        tabindex="-1">
                                                    <option></option>
                                                    <option value="off">{{_ "off"}}</option>
                                                    <option value="strict">{{_ "strict"}}</option>
                                                    <option value="moderate">{{_ "moderate"}}</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "validator"}}</label>
                                            <div id="divValidatorAddCollection" class="col-lg-10">
                                                <textarea id="txtValidatorAddCollection"
                                                          class="form-control"></textarea>
                                                <span class="help-block m-b-none">{{{_ "mongodb_version_warning" version="3.2"}}}</span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <!-- TAB 4-->
                            <div id="tab-4-collation" class="tab-pane">
                                <div class="panel-body no-borders modal-background">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">{{_ "collation"}}</label>
                                            <div id="divCollationAddCollection" class="col-lg-10">
                                                <textarea id="txtCollationAddCollection"
                                                          class="form-control"></textarea>
                                                <span class="help-block m-b-none">{{{_ "mongodb_version_warning" version="3.4"}}}</span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="pull-left">
                        <button type="button" class="btn btn-white" data-dismiss="modal">{{_ "close"}}</button>
                    </div>
                    <button id="btnCreateCollection" data-style="contract" type="button"
                            class="btn btn-primary ladda-button">{{_ "save"}}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
